<!--
 * @Author: ShiJunJie
 * @Date: 2022-04-06 11:38:48
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-22 14:12:49
 * @Descripttion: 富文本编辑器
 * https://www.tiny.cloud/
-->
<template>
  <!-- <div>
    <a-button @click="test()">请求拦截测试</a-button>
    <br /> -->
  <Editor apiKey="19gm3lqton4ugkbac9pi7wqa16mc7800gkxxqj1pz5g0tdu9" v-model="initialValue" :init="init"></Editor>
  <!-- </div> -->
</template>

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue';
import { User } from '@/api/user';

const props = withDefaults(
  defineProps<{
    value: any;
  }>(),
  { value: '<p>默认文本</p>' }
);
const emit = defineEmits(['update:value']);
const initialValue = ref(props.value);
watch(initialValue, (value, oldValue) => (value !== oldValue ? emit('update:value', value) : ''));

// const test = async () => {
//   const res = await Test.test();
//   console.log('res', res);
// };

const init = reactive({
  height: 500,
  // menubar: false,
  language: 'zh_CN',
  menubar: 'file edit insert view format table',
  plugins:
    'print preview searchreplace autolink directionality visualchars fullscreen image link media template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern paste emoticons bdmap indent2em ',
  toolbar:
    'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                     styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                     table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs importword kityformula-editor',
  fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
  font_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
  link_list: [
    { title: '预置链接1', value: 'http://www.tinymce.com' },
    { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
  ],
  image_list: [
    { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
    { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  //importcss_append: true,
  //自定义文件选择器的回调内容
  file_picker_callback: function (callback: any, value: any, meta: any) {
    if (meta.filetype === 'file') {
      callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
    }
    if (meta.filetype === 'image') {
      callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
    }
    if (meta.filetype === 'media') {
      callback('movie.mp4', {
        source2: 'alt.ogg',
        poster: 'https://www.baidu.com/img/bd_logo1.png'
      });
    }
  },
  //为内容模板插件提供预置模板
  templates: [
    { title: '模板1', description: '介绍文字1', content: '模板内容' },
    {
      title: '模板2',
      description: '介绍文字2',
      content: '<div class="mceTmpl"><span class="cdate">CDATE</span>，<span class="mdate">MDATE</span>，我的内容</div>'
    }
  ],
  //content_security_policy: "script-src *;",
  extended_valid_elements: 'script[src]',
  //
  template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
  template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
  autosave_ask_before_unload: false,
  // toolbar_mode: '',
  automatic_uploads: false,
  images_upload_base_path: '/demo',
  images_upload_handler: function (blobInfo: any, succFun: any, failFun: any) {
    succFun('/demo/images/img.jpg');
  }
  // images_upload_url: 'http://tinymce.ax-z.cn/demo/upimg.php',
  // images_upload_base_path: '/demo',
});
</script>

<style lang="scss" scoped></style>
